<template>
  <div class="flex">
    <div class="tit_wrap">
      <div class="tit_item active">全部</div>
      <div
        class="tit_item"
        :class="{ active: current == index }"
        v-for="(item, index) in options"
        :key="index"
        @click="toggle(index)"
        >{{ item.label }}</div
      >
    </div>
    <div class="flex1">
      <zbTable
        v-if="dalei.code"
        ref="tableRef"
        :api-fun="get_list"
        :class_code="dalei.code"
        from="subclass"
        @getselection="getselection"
        @action="action"
      >
        <template #toolbar>
          <a-space>
            <!-- <a-button
              :type="item.types == 'add' ? 'primary' : 'dashed'"
              v-for="item in optBtn"
              :key="item.url"
              v-permission="item.url"
              @click="topAction(item)"
            >
              <template #icon>
                <plus-outlined v-if="item.types == 'add'" />
                <clear-outlined v-else-if="item.types == 'delete'" />
                <rest-outlined v-else-if="item.types == 'recycling'" />
              </template>
              <span>{{ item.name }}</span>
            </a-button> -->
            <template v-if="delArrShow">
              <a-button class="ele-btn-icon" @click="delArrHide()"
                ><span>取消</span></a-button
              >
              <a-button
                type="primary"
                danger
                ghost
                class="ele-btn-icon"
                @click="delArrFun()"
                ><span>确认删除</span></a-button
              >
            </template>
          </a-space>
        </template>
      </zbTable>
    </div>
    <!-- 新建弹窗 -->
    <add v-if="showAdd" :dalei="dalei" v-model:visible="showAdd" @done="done" />
    <!-- 编辑弹窗 -->
    <edit
      v-if="showEdit"
      :editId="editId"
      :dalei="dalei"
      v-model:visible="showEdit"
      @done="done"
    />
    <!-- 回收站弹窗 -->
    <recycle v-if="showRecycle" v-model:visible="showRecycle" @done="done" />
    <a-modal
      v-model:visible="popconfirm"
      title="提示"
      centered
      :width="260"
      @ok="delFun"
      ><p>删除后请在回收站内恢复</p></a-modal
    >
  </div>
</template>
<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import zbTable from './components/classIndex.vue';
  import {
    PlusOutlined,
    UploadOutlined,
    ClearOutlined,
    RestOutlined
  } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { get_list, get_list2, delArr } from '@/api/material/subclass';
  import { get_broad_class_select } from '@/api/material/select';
  import add from './components/add.vue';
  import edit from './components/edit.vue';
  import recycle from './components/recycle.vue';

  const loading = ref(false);
  const options = ref([]);
  const current = ref(0);
  const showAdd = ref(false);
  const dalei = ref({});
  const showEdit = ref(false);
  const editId = ref(null);
  const popconfirm = ref(false);
  const delArrShow = ref(false); //批量删除确认弹框
  const delArrData = ref([]); //批量删除的id
  const optBtn = ref([]);
  const showRecycle = ref(false);

  // 获取子组件
  const tableRef = ref(null);

  onMounted(() => {
    get_broad_class_select({ page: 1, page_size: 99999 }).then((res) => {
      options.value = res;
      if (options.value.length > 0) {
        dalei.value = {
          name: options.value[0].label,
          code: options.value[0].value
        };
      }
    });
  });
  const toggle = (index) => {
    current.value = index;
    dalei.value = {
      name: options.value[index].label,
      code: options.value[index].value
    };
    tableRef.value.changeCode(dalei.value.code);
  };
  const done = () => {
    reloadTable();
  };
  const reloadTable = () => {
    showAdd.value = false;
    showEdit.value = false;
    tableRef.value.changeSelection(false);
    tableRef.value.reload();
  };

  const delFun = () => {
    delArr({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        popconfirm.value = false;
        reloadTable();
        loading.value = false;
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  const delArrHide = () => {
    tableRef.value.changeSelection(false);
    delArrShow.value = false;
  };
  const delArrOpt = () => {
    tableRef.value.changeSelection(true);
    delArrShow.value = true;
  };
  const delArrFun = () => {
    delArr({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        delArrHide();
        reloadTable();
        loading.value = false;
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  //获取选中的行
  const getselection = (val) => {
    delArrData.value = [];
    val.value.map((item) => {
      delArrData.value.push(item.id);
    });
  };
  const action = (data) => {
    if (data.action_data.type == 'add') {
      showAdd.value = true;
    }
    if (data.action_data.type == 'recycling') {
      showRecycle.value = true;
    }
    if (data.action_data.type == 'edit') {
      showEdit.value = true;
      editId.value = data.row_data.id;
    }
    if (data.action_data.type == 'delete') {
      if (data.action_data.mold == 'more') {
        delArrOpt();
      } else {
        delArrData.value = [];
        delArrData.value.push(data.row_data.id);
        popconfirm.value = true;
      }
    }
  };
</script>

<style scoped></style>
